<template>
  <div class="base-container">
    <el-form
      ref="toolQuery"
      :model="toolQuery"
      :rules="toolQueryRules"
      size="small"
      label-width="120px"
      v-show="toolQueryVisiable"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label-width="70px" label="应用名称" prop="name">
            <el-input
              v-model="toolQuery.name"
              placeholder="请输入应用名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="应用所属用户名" prop="username">
            <el-input
              v-model="toolQuery.username"
              placeholder="请输入应用所属用户名"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button type="primary" @click="initData" size="small"
            >搜索</el-button
          >
          <el-button @click="resetForm" size="small">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <toolBar
      :tableColumnConfig="tableColumnConfig"
      :checkedRow="checkedRow"
      :dataList="dataList"
      :toolBarAddBTN="toolBarAddBTN"
      @edit="edit"
      @del="del"
      @add="openAdd"
    ></toolBar>
    <el-table :data="processData">
      <el-table-column
        v-for="(item, index) in cptColumn"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      ></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/*
  通用表格使用说明
    配套功能 ---  
      1.工具栏 --- 配置列、增、删、改、查
      2.表格自动渲染列
      3.分页栏
    使用步骤
      1.引入 CURD类
      2.引入需要的组件
*/
import toolBar from "@/components/common/toolBar";
import curd from "@/mixins/curd";
import { sendJSON } from "@/utils/request";

const CURD = new curd({
  url: "/sys/app/"
});
export default {
  components: { toolBar },
  mixins: [CURD],
  data() {
    return {
      tableColumnConfig: [
        { id: 1, label: "应用编号", prop: "id", show: true },
        { id: 2, label: "应用名称", prop: "name", show: true },
        { id: 3, label: "访问AK值", prop: "AK", show: true },
        { id: 4, label: "应用类别", prop: "type", show: true },
        { id: 5, label: "备注信息", prop: "remark", show: true }
      ],
      toolQuery: {
        name: undefined,
        username: undefined
      },
      toolQueryRules: {
        name: [],
        username: []
      }
    };
  },
  methods: {
    // 需要发起请求，接口数组
    openAdd() {
      sendJSON("sys/action/page", {
        appIntercept: 1,
        size: 99999
      }).then(res => {
        let actionList = res.data.list;
        let appInfo = {
          name: "",
          actionList: [],
          ipWhiteList: "*",
          remark: ""
        };
        this.$router.push({
          name: "myAppDetail",
          params: { info: { actionList, appInfo }, isAdd: true }
        });
      });
    },
    openEdit(obj) {
      Promise.all([
        sendJSON("sys/action/page", {
          appIntercept: 1,
          size: 99999
        }),
        sendJSON("sys/app/get", { uid: obj.uid })
      ]).then(([action, app]) => {
        let actionList = action.data.list,
          appInfo = app.data;
        this.$router.push({
          name: "myAppDetail",
          params: { info: { actionList, appInfo }, isAdd: false }
        });
      });
    },
    // 重置表单
    resetForm() {
      this.$refs["toolQuery"].resetFields();
      this.initData();
    }
  }
};
</script>

<style lang="scss">
@import "@/styles/base/index.scss";
</style>
